<template>
  <div>
    <header>
      <van-nav-bar title="修改密码" @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="20" color="black" />
        </template>
      </van-nav-bar>
    </header>
    <main>
      <van-cell-group class="van-hairline--bottom">
        <van-field
          v-model="tel"
          label="手机号"
          placeholder="请输入手机号"
          autofocus
        />
      </van-cell-group>
      <van-cell-group class="van-hairline--bottom">
        <van-field
          v-model="password0"
          label="原密码"
          placeholder="请输入原密码"
          :right-icon="flag ? 'eye-o' : 'closed-eye'"
          @click-right-icon="flag = !flag"
          :type="flag ? 'text' : 'password'"
        />
      </van-cell-group>
      <van-cell-group class="van-hairline--bottom">
        <van-field
          v-model="password1"
          label="新密码"
          placeholder="请输入新密码"
          :right-icon="flag ? 'eye-o' : 'closed-eye'"
          @click-right-icon="flag = !flag"
          :type="flag ? 'text' : 'password'"
        />
      </van-cell-group>
      <van-cell-group class="van-hairline--bottom">
        <van-field
          v-model="password2"
          label="确认密码"
          placeholder="请再次输入密码"
          :right-icon="flag ? 'eye-o' : 'closed-eye'"
          @click-right-icon="flag = !flag"
          :type="flag ? 'text' : 'password'"
        />
      </van-cell-group>
    </main>
    <div class="login">
      <van-button
        type="block"
        round
        color="red"
        :disabled="flag_d"
        @click="changepd"
        >确认修改</van-button
      ><br />
    </div>
  </div>
</template>


<script>
import Vue from "vue";
import { Field, CellGroup, NavBar, Button, Toast } from "vant";
import {UpdatePassword} from '../api/me'

Vue.use(Field);
Vue.use(NavBar);
Vue.use(Button);
Vue.use(CellGroup);
Vue.use(Toast);
export default {
  data() {
    return {
      flag: false,
      tel: localStorage.getItem('tel'),
      password1: "",
      password0: "",
      password2: "",
    };
  },
  //修改密码
  methods: {
    changepd() {
        // console.log(this.password0);
        // console.log(this.password2);
      UpdatePassword({userid:localStorage.getItem('id'),oldpassword:this.password0,newpassword:this.password2}).then((res)=>{
        console.log(res.data.code);
        if(res.data.code=='200'){
           Toast('修改成功,请重新登录')
             this.$router.push("/login");
        }else if(res.data.code=='10030'){
            Toast('原密码错误,请重新输入')
        }  
        })
    
    },
  },
  computed: {
    flag_d(){
        if(this.password1==this.password2&&this.password2!=''&&this.password1!=''){
            return false
        }else{
            return true
        }
    }
  }
};
</script>

<style>
</style>